<template>
  <div class="sewingHomeBox">
    <CommonHeader @loginOut="loginOut" :userData="userData"></CommonHeader>
    <div class="sewingContent">
      <div class="contentLeft">
        <div class="cardBox">
          <van-image v-if="sewingData.HangerInfo.ImagePath"  width="90" height="105" radius="5" :src="sewingData.HangerInfo.ImagePath" alt="" />
          <div v-else class="imgNo">无图片</div>
          <div class="detailMsg">
            <div class="msgItem">
              <div>
                <h1>衣架号</h1>
                <span>{{  sewingData.HangerInfo.HangerId  }}</span>
              </div>
              <div>
                <h1>通知单号</h1>
                <span>{{  sewingData.HangerInfo.MONo  }}</span>
              </div>
              <div>
                <h1>款号</h1>
                <span>{{  sewingData.HangerInfo.StyleNo  }}</span>
              </div>
            </div>
            <div class="msgItem">
              <div>
                <h1>颜色</h1>
                <span>{{  sewingData.HangerInfo.Color  }}</span>
              </div>
              <div>
                <h1>尺码</h1>
                <span>{{  sewingData.HangerInfo.SizeName  }}</span>
              </div>
              <div style="opacity:0;">
                <h1>款号</h1>
                <span>{{  sewingData.HangerInfo.StyleNo  }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="tableBox">
          <div class="tableHead">
            <div style="width:15%;">确认</div>
            <div style="width:11%;">工序号</div>
            <div style="width:44%;">工序描述</div>
            <div style="width:15%;">标准工时</div>
            <div style="width:15%;">今日产量</div>
          </div>
          <div class="tableBody">
            <div :class="{ 'active': activeIndex === index }" @click="selectClick(index, item)"
              v-for="(item, index) in sewingData.WorkSubList" :key="index" class="bodyItem">
              <span style="width:15%;" class="firstSpan">
                <img class="tableImg" v-if="item.Confirmed" src="@/assets/img/comfirm.png" alt="">
                <img class="tableImg" v-else src="@/assets/img/noComfirm.png" alt="">
              </span>
              <span style="width:11%;">{{  item.SubID  }}</span>
              <span style="width:41%;line-height:29px;">{{  item.WorkName  }}</span>
              <span style="width:15%;">{{  item.WorkSam  }}</span>
              <span style="width:15%;">{{  item.Qty  }}</span>
            </div>
          </div>
        </div>
        <div class="descBox">
          <div class="titleBgc">
            <img src="@/assets/img/tiXing.png" alt="">
            <span>车缝线</span>
          </div>
          <div class="descItem">
            <span>规格 &nbsp;{{  selectItemData.ThreadSpec  }}</span>
          </div>
          <div class="descItem">
            <span>颜色 &nbsp;{{  selectItemData.ThreadColor  }}</span>
          </div>
          <div class="colorPart" :style="{background:selectItemData.rgb}">

          </div>
        </div>
      </div>
      <div class="contentRight">
        <template v-if="showFlag">
          <div class="cardTop">
            <div class="commonCard">
              <div class="cardTitle">最近5件实测节拍</div>
              <div class="desc">最近5件典型节拍：{{  sewingData.FiveBeat.dianxingjiepai  }}分钟</div>
              <!-- echarts图 -->
              <div class="commonEchart" id="echartsOne"></div>
              <div class="echartDesc">
                <div>
                  <span></span>
                  <span>实时节拍</span>
                </div>
                <div>
                  <span class="green"></span>
                  <span>平均节拍：{{  sewingData.FiveBeat.pingjunjiepai  }}分钟</span>
                </div>
              </div>
            </div>
            <div class="commonCard">
              <div class="cardTitle">细胞单元：{{  sewingData.CellUnit.PartName  }}</div>
              <!-- echarts图 -->
              <div class="commonEchart" id="echartsTwo"></div>
              <div class="echartDesc">
                <div>
                  <span></span>
                  <span>实际完成</span>
                </div>
                <div>
                  <span class="grey"></span>
                  <span>计划完成</span>
                </div>
              </div>
            </div>
          </div>
          <div class="cardBottom">
            <div class="commonCard">
              <div class="cardTitle">最近30件典型节拍趋势图</div>
              <!-- echarts图 -->
              <div class="commonEchart" id="echartsThree"></div>
              <div class="echartDesc">
                <div>
                  <span></span>
                  <span>典型节拍</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <div class="detailContent" v-else>
          <div class="topBox">
            <div class="commonCard">
              <div class="cardTitle">辅助工具</div>
              <div class="toolBox">
                <div class="toolMsg">{{  selectItemData.ToolDesc  }}</div>
                <van-image v-if="selectItemData.ImagePath" @click="imgClick" class="img" width="90" height="105" radius="5"
                  :src="selectItemData.ImagePath" alt="" />
                <div v-else class="noImg">
                  无图片
                </div>
              </div>
            </div>
            <div class="videoBox" id="videoBox" @click="openVideo">
              <template v-if="selectItemData.VideoPath">
                <!-- <video class="video" id="video">
                  <source src="http://172.16.100.95:8014/Upload/20220827/ca1b73175a119cc41ca624a39a022041.mp4"
                    type="video/mp4">
                </video> -->
                <!-- <video class="video" id="video">
                  <source :src="selectItemData.VideoPath" type="video/mp4">
                </video> -->
                <img src="../../assets/img/video.png" style="width: 100%;height: 100%;object-fit:fit" />
                <div class="videoWrap"></div>
              </template>
              <template v-else>
                无视频
              </template>
            </div>
          </div>
          <div class="middleBox">
            <div class="commonCard">
              <div class="cardTitle">质量标准</div>
              <div class="qualityTitle" v-html="selectItemData.QualityStandard">
                <!-- {{selectItemData.QualityStandard}} -->
              </div>
            </div>
          </div>
          <div class="bottomBox">
            <van-button @click="backEcharts" class="btn btnOne" type="primary" color="#007DBC">返回</van-button>
            <van-button class="btn btnTwo" @click="comfirmClick" :disabled="selectItemData.Confirmed || selectItemData.clickFlag" type="primary"
              color="#007DBC">{{  selectItemData.Confirmed ? '已确认' : '确认'  }}</van-button>
          </div>
        </div>
      </div>
    </div>
    <van-image-preview v-model="showImg" :images="images">
    </van-image-preview>
    <van-popup class="video-dialog" v-model="showVideo" closeable @close="beforeVideoClose">
      <div class="dialog-main">
        <video ref="video" class="video-play" :src="selectItemData.VideoPath"
          webkit-playsinline="isiPhoneShowPlaysinline" playsinline="isiPhoneShowPlaysinline" controlslist="nodownload"
          controls />
      </div>
    </van-popup>
  </div>
</template>

<script>
import CommonHeader from '@/components/CommonHeader'
import * as echarts from 'echarts'
import { ConfirmApi,defaultAxios } from '@/api/loginApi'
import { Toast } from 'vant'
import fekeData from './index.json'
export default {
  data() {
    return {
      showFlag: true,
      activeIndex: 0,
      selectItemData: {},
      websock: '',
      timer: null,
      userData: {},
      sewingData: {
        CellUnit: {},
        FiveBeat: {},
        HangerInfo: {},
        ThirtyBeat: {},
        WorkSubList: {}
      },
      showImg: false,
      images: [],
      showVideo: false,
      socketTimer: null,
      isLoginOut: false,
      fekeData:[]
    }
  },
  mounted() {
    if (sessionStorage.getItem('userData')) {
      this.userData = JSON.parse(sessionStorage.getItem('userData'))
    }
    this.fekeData = fekeData
    if(this.userData.jobNumber == '582848'){
      this.sewingData = this.fekeData[0]
    }else if(this.userData.jobNumber == '371260'){
      this.sewingData = this.fekeData[1]
    }else if(this.userData.jobNumber == '919904'){
      this.sewingData = this.fekeData[2]
    }else if(this.userData.jobNumber == '302520'){
      this.sewingData = this.fekeData[3]
    }
    // 第一份数据
    // this.sewingData = this.fekeData[0]
      // 默认选中第一个
      if (this.sewingData.WorkSubList.length > 0) {
        if(this.activeIndex == 0){
          this.selectClick(0,this.sewingData.WorkSubList[0])
            this.showFlag = true
          // this.selectItemData = this.sewingData.WorkSubList[0]
          console.log(this.selectItemData.VideoPath);
        }else{
          this.selectClick(this.activeIndex,this.sewingData.WorkSubList[this.activeIndex])
        }
      }
      if (this.showFlag) {
        this.$nextTick(() => {
          this.initEcharts()
        })
      }
    
    console.log(fekeData)
    // this.initWebSocket()
  },
  methods: {
    comfirmClick() {
      this.selectItemData.clickFlag = true
      let params = {
        jobNumber: this.userData.jobNumber,
        styleNo: this.sewingData.HangerInfo.StyleNo,
        subId: this.selectItemData.SubID,
        gsdMainID: this.sewingData.HangerInfo.GsdMainID,
        craftPathID: this.sewingData.HangerInfo.CraftPathID
      }
      ConfirmApi(params).then(res => {
        if (res.data.code == 0) {
          this.selectItemData.Confirmed = true
          Toast('操作成功')
        }else{
          this.selectItemData.clickFlag = false
        }
      }).catch(() =>{
         this.selectItemData.clickFlag = false
      })
    },
    imgClick() {
      this.showImg = true
    },
    initWebSocket() {//初始化websocket
      let reuestAddress = localStorage.getItem('requestAddress') ? JSON.parse(localStorage.getItem('requestAddress')) : {}
      const wsuri = 'ws://' + reuestAddress.wsAddress;
      this.websock = new WebSocket(wsuri);//这里面的this都指向vue
      this.websock.onopen = this.websocketopen;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
      this.websock.onerror = this.websocketerror;
    },
    websocketopen() {//打开
      console.log("WebSocket连接成功")
       if(this.socketTimer){
        clearInterval(this.socketTimer)
      }
      this.websock.send(JSON.stringify({
        LineNumber: this.userData.lineNumber,
        StationNum: this.userData.stationNum,
        JobNumber: this.userData.jobNumber,
        GroupCode: this.userData.groupCode,
        // LineType:'线内'
      }));
    },
    websocketonmessage(e) { //数据接收
      console.log(JSON.parse(e.data))
      console.log()
      this.sewingData = JSON.parse(e.data)
      // 默认选中第一个
      if (JSON.parse(e.data).WorkSubList.length > 0) {
        if(this.activeIndex == 0){
          this.selectClick(0,this.sewingData.WorkSubList[0])
            this.showFlag = true
          // this.selectItemData = this.sewingData.WorkSubList[0]
          console.log(this.selectItemData.VideoPath);
        }else{
          this.selectClick(this.activeIndex,this.sewingData.WorkSubList[this.activeIndex])
        }
      }
      if (this.showFlag) {
        this.$nextTick(() => {
          this.initEcharts()
        })
      }
    },
    // 打开视频弹窗
    openVideo() {
      if (this.selectItemData.VideoPath) {
        this.showVideo = true
        setTimeout(() => {
          this.$refs.video.play()
        }, 100);
      } else {
        Toast("该工序暂无工艺视频")
      }
    },
    // 关闭视频弹窗
    beforeVideoClose(action) {
      if (action == 'confirm') {
        // showVideo.value = false;
      } else {
        this.$refs.video.pause()
        this.showVideo = false;
      }
    },
    websocketclose() { //关闭
      console.log("WebSocket关闭");
       if(!this.isLoginOut){
        Toast("WebSocket关闭，正在尝试重新连接")
        defaultAxios().then(res =>{
          
        })
      }
      clearInterval(this.socketTimer)
      this.socketTimer = setInterval(() =>{
          this.initWebSocket()
      },5000)
    },
    websocketerror() { //失败
      Toast("WebSocket连接失败")
      console.log("WebSocket连接失败");
      // this.initWebSocket()
      // if(!this.isLoginOut){
      //   Toast("WebSocket关闭，正在尝试重新连接")
      //   defaultAxios().then(res =>{
          
      //   })
      // }
      // clearInterval(this.socketTimer)
      // this.socketTimer = setInterval(() =>{
      //     this.initWebSocket()
      // },5000)
    },
    selectClick(e, item) {
      this.activeIndex = e
      this.showFlag = false
      item.QualityStandard = item.QualityStandard.replace(/[\r\n]/g, "<br />")
      item.QualityStandard = item.QualityStandard.replace(/【/g, "<span style='color: red;font-weight:600'>")
      item.QualityStandard = item.QualityStandard.replace(/】/g, "</span>")
      this.$set(item,'clickFlag',false)
      this.selectItemData = item
      this.images = []
      this.images.push(item.ImagePath)
      // console.log(item.QualityStandard)
      // this.$nextTick(() =>{
      //   this.initEcharts()
      // })
    },
    backEcharts() {
      this.showFlag = true
      this.$nextTick(() => {
        this.initEcharts()
      })
    },
    // 最近5件实测节拍echarts
    latestNum(lateXdata, lateYdata, average) {
      let myChart = this.$echarts.init(document.getElementById("echartsOne"));
      let option = {
        tooltip: {},
        legend: {
          show: false,
          data: ["实测节拍"],
        },
        grid: {
          left: '3%',
          top: '7%',
          bottom: '3%',
          right: '8%',
          containLabel: true,
        },
        xAxis: {
          data: lateXdata,
        },
        yAxis: {},
        series: [
          {
            name: "实测节拍",
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "top",
                formatter: "{c}",
              },
            },
            itemStyle: {
              normal: {
                color: '#007DBC'
              },
            },
            data: lateYdata,
            markLine: {
              silent: true,
              symbol: "none",
              label: {
                position: "middle",
                formatter: "{b}",
              },
              data: [
                {
                  // name: "平均节拍",
                  yAxis: average,
                  lineStyle: {
                    color: "#23A942",
                  },
                  label: {
                    // show: false,
                    position: "end",
                    // formatter: "{b}\n {c}",
                    formatter: "{c}",
                    color: '#23A942'
                  },
                },
              ],
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    // 细胞单元echarts
    secondEcharts(effect, value,RateKey) {
      let myChart = this.$echarts.init(document.getElementById("echartsTwo"));
      let m2R2Data = [
        {
          value: effect,
          legendname: "实际完成",
          name: "种类01  335",
          itemStyle: { color: "#007DBC" },
        },
        {
          value: value,
          legendname: "计划完成",
          name: "种类01  335",
          itemStyle: { color: "#EFF1F3" },
        },
      ]
      let option = {
        title: [
          {
            text: effect + "%",
            subtext: RateKey,
            textStyle: {
              fontSize: 20,
              color: "#007DBC",
            },
            subtextStyle: {
              fontSize: 18,
              color: "black",
            },
            textAlign: "center",
            x: "50%",
            y: "41%",
          },
        ],
        tooltip: {
          trigger: "item",
          formatter: function (parms) {
            var str =
              parms.seriesName +
              "</br>" +
              parms.marker +
              "" +
              parms.data.legendname +
              "</br>" +
              "数量：" +
              parms.data.value +
              "</br>" +
              "占比：" +
              parms.percent +
              "%";
            return str;
          },
        },
        series: [
          {
            name: "细胞单元",
            type: "pie",
            center: ["50%", "50%"],
            radius: ["40%", "65%"],
            clockwise: false, //饼图的扇区是否是顺时针排布
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "outter",
                formatter: function (parms) {
                  return parms.data.legendname;
                },
              },
            },
            labelLine: {
              normal: {
                length: 5,
                length2: 3,
                smooth: true,
              },
            },
            data: m2R2Data,
          },
        ],
      };
      myChart.setOption(option);
    },
    // 最近30件趋势图
    thirdEcharts(thirdXdata, thirdYdata) {
      let myChart = this.$echarts.init(document.getElementById("echartsThree"));
      let option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(255,255,255,0)' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: 'rgba(255,255,255,1)' // 100% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255,255,255,0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
          },
        },
        grid: {
          top: '5%',
          left: '5%',
          right: '1%',
          bottom: '18%',
          // containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          axisLine: { //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.4)'
            },
          },
          axisLabel: { //坐标轴刻度标签的相关设置
            textStyle: {
              color: '#000',
              margin: 5,
            },
          },
          axisTick: {
            show: false,
          },
          data: thirdXdata,
        }],
        yAxis: [{
          type: 'value',
          min: 0,
          // max: 140,
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(0,0,0,0.1)'
            }
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            margin: 5,
            textStyle: {
              color: '#000',

            },
          },
          axisTick: {
            show: false,
          },
        }],
        series: [{
          name: '注册总量',
          type: 'line',
          // smooth: true, //是否平滑曲线显示
          symbol: 'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          // symbol: 'image://./static/images/guang-circle.png',
          symbolSize: 8,
          lineStyle: {
            normal: {
              color: "rgba(0,125,188,1)", // 线条颜色
            },
            borderColor: 'rgba(0,125,188,1)'
          },
          label: {
            show: true,
            position: 'top',
            textStyle: {
              color: 'rgba(0,125,188,1)',
            }
          },
          itemStyle: {
            normal: {
              color: "rgba(0,125,188,1)",
            }
          },
          tooltip: {
            show: false
          },
          areaStyle: { //区域填充样式
            normal: {
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0,150,239,0.3)'
              },
              {
                offset: 1,
                color: 'rgba(0,253,252,0)'
              }
              ], false),
              shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
              shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          },
          data: thirdYdata
        }]
      };
      myChart.setOption(option);
    },
    initEcharts() {
      // 最近5件实测节拍echarts
      let lateXdata = [], lateYdata = [];
      if (this.sewingData.FiveBeat && this.sewingData.FiveBeat.BeatData.length) {
        this.sewingData.FiveBeat.BeatData.forEach((item, index) => {
          lateXdata.push(item.Name)
          lateYdata.push(item.Number)
        })
      }
      this.latestNum(lateXdata, lateYdata, this.sewingData.FiveBeat.pingjunjiepai)
      // 细胞单元，效率
      let effect = this.sewingData.CellUnit.Rate ? this.sewingData.CellUnit.Rate * 100 : 0
      let value = 100 - effect
      this.secondEcharts(effect, value,this.sewingData.CellUnit.RateKey)
      // 最近30件趋势图
      let thirdXdata = [], thirdYdata = [];
      this.sewingData.ThirtyBeat.BarData.forEach((v, k) => {
        thirdXdata.push(v.Name)
        thirdYdata.push(v.Number)
      })
      this.thirdEcharts(thirdXdata, thirdYdata)
    },
    loginOut() {
      this.isLoginOut = true
      this.websock.close()
      clearInterval(this.timer)
      clearInterval(this.socketTimer)
    }
  },
  components: {
    CommonHeader
  }
}
</script>

<style lang="less" scoped>
.sewingHomeBox {
  background: #E7F3F9;
  height: 100%;
  display: flex;
  flex-direction: column;

  .sewingContent {
    padding: 18px;
    box-sizing: border-box;
    flex: 1;
    display: flex;

    .contentLeft {
      width: 46%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .cardBox {
        background: #fff;
        padding: 10px;
        display: flex;
        .imgNo{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 90px;
          height: 105px;
        }
        .detailMsg {
          display: flex;
          margin-left: 10px;

          .msgItem {
            font-size: 19px;

            div {
              display: flex;
              line-height: 35px;

              h1 {
                font-weight: normal;
                width: 76px;
                margin-right: 15px;
                text-align: right;
              }

              span {
                color: #007DBC;
              }
            }

            &:first-child {
              margin-right: 22px;
            }
          }
        }
      }

      .tableBox {
        background: #fff;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;

        // margin: 10px  0;
        .tableHead {
          display: flex;
          background: #007DBC;
          font-size: 19px;

          div {
            text-align: center;
            line-height: 40px;
            color: #fff;
            border-bottom: 1px solid #007DBC;
          }
        }

        .tableBody {
          height: 390px;
          overflow: scroll;

          .bodyItem {
            display: flex;
            align-items: center;
            line-height: 45px;

            span {
              text-align: center;
            }

            .step {
              position: relative;
              top: -4px;
            }

            .firstSpan {
              display: flex;
              align-items: center;
              justify-content: center;
              height: 45px;

              .tableImg {
                width: 35px;
                height: 35px;
              }
            }
          }

          .active {
            background: #BEDEEF;
            color: #007DBC;
          }
        }
      }

      .descBox {
        display: flex;
        align-items: center;
        background: #fff;
        position: relative;
        .titleBgc {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 25px;

          img {
            height: 65px;
            width: 135px;
            flex-shrink: 0;
          }

          span {
            position: absolute;
            color: #fff !important;
            font-size: 20px;
            z-index: 999;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
          }
        }

        .descItem {
          margin-right: 40px;
          font-size: 20px;
        }
        .colorPart{
          // background: #007DBC;
          width: 80px;
          height: 50%;
          position: absolute;
          right: 15px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }

    .contentRight {
      flex: 1;
      margin-left: 10px;
      display: flex;
      flex-direction: column;

      .commonCard {
        background: #fff;
        padding: 8px;
        width: 49%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .cardTitle {
          font-size: 20px;
          color: #007DBC;
          border-bottom: 1px solid #007DBC;
          padding-bottom: 9px;
        }

        .desc {
          font-size: 14px;
          color: #E97A4F;
          text-align: right;
          margin: 8px 7px 5px 0;
        }

        .commonEchart {
          flex: 1;
        }

        .echartDesc {
          font-size: 14px;
          display: flex;
          justify-content: space-between;

          div {
            display: flex;
            align-items: center;

            span:first-child {
              width: 12px;
              height: 12px;
              background: #007DBC;
              margin-right: 15px;
            }

            .green {
              background: #23A942 !important;
            }

            .grey {
              background: #dcdddf !important;
            }
          }
        }
      }

      .cardTop {
        display: flex;
        justify-content: space-between;
        height: 310px;
      }

      .cardBottom {
        flex: 1;
        margin-top: 10px;
        display: flex;
        flex-direction: column;

        .commonCard {
          width: 100%;
          flex: 1;
        }
      }

      .detailContent {
        flex: 1;
        display: flex;
        flex-direction: column;

        .topBox {
          display: flex;
          justify-content: space-between;

          .toolBox {
            padding-top: 10px;
            display: flex;
            justify-content: space-between;

            .toolMsg {
              font-size: 20px;
            }
            .noImg{
              width: 90px;
              height: 105px;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .img {
              margin-left: 10px;
              flex-shrink: 0;
            }
          }

          .videoBox {
            width: 49%;
            height: 164px;
            background-color: #fff;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            position: relative;

            .video {
              width: 100%;
              height: 164px;
              border-radius: 5px;
            }

            .videoWrap {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 0;
              right: 0;
            }
          }
        }

        .middleBox {
          flex: 1;
          display: flex;
          flex-direction: column;

          .commonCard {
            width: 100%;
            margin: 10px 0;
            display: flex;
            flex-direction: column;
            flex: 1;

            .qualityTitle {
              flex: 1;
              padding-top: 20px;
              font-size: 22px;
            }
          }
        }

        .bottomBox {
          background: #fff;
          padding: 10px 20px;
          display: flex;
          justify-content: space-between;

          .btn {
            font-size: 25px;
            // width: 85%;
            height: 50px;
          }

          .btnOne {
            width: 40%;
          }

          .btnTwo {
            width: 55%;
          }
        }
      }
    }
  }
}

.video-dialog {
  width: 100vw;
  height: 100vh;

  .dialog-main {
    display: flex;
  }

  .video-play {
    width: 100vw;
    height: 100vh;
    object-fit: scale-down;
    // object-fit: cover;
    object-position: center center;

    &:focus {
      outline: -webkit-focus-ring-color auto 0px;
    }
  }

  /deep/ .van-popup__close-icon {
    width: 64px;
    height: 64px;
    line-height: 64px;
    font-size: 40px;
    text-align: center;
    // color: #fff;
    // background-color: red;
  }
}
</style>